<script setup lang="ts">
import type { Page, GroupTable } from '@/types'
import { dateFormat, getFormatDictMap } from '@/util/dict'
import { onMounted, ref } from 'vue'
import { Search, Refresh } from '@/util/icons'
import Pagination from '@/components/Pagination.vue'
import { getAllGroup } from '@/views/sys/group/api'
import ContentPageLayout from '@/layout/ContentPageLayout.vue'
const props = defineProps<{
  pKey?: string
}>()
/**
 * 注册事件
 */
const emit = defineEmits<{
  (
    e: 'select',
    data: {
      id: number
      name: string
      pKey: string
    }
  ): void
}>()
const page = ref<Page<GroupTable>>({
  num: 1,
  size: 10,
  rows: [],
  count: 0
})
/* 获取对应的字典信息 */
const tableDict = ref<Map<string, string>>()
const statusDict = ref<Map<string, string>>()

// 页面加载
const loading = ref<boolean>(false)
// 获取页面数据
function getPageData() {
  loading.value = true
  getAllGroup(page.value, searchForm.value)
    .then((tabs) => {
      page.value = tabs.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
}
onMounted(() => {
  getFormatDictMap('sys_group', 'head').then((d) => {
    tableDict.value = d
  })
  getFormatDictMap('sys_role_status', 'val').then((d) => {
    statusDict.value = d
  })
  getPageData()
})

/* 搜索 */
const searchForm = ref<GroupTable>({
  name: '',
  status: ''
})

// 重置搜索框
function reSearch() {
  searchForm.value = {
    name: '',
    status: ''
  }
  getPageData()
}

function selectGroup(g: GroupTable) {
  emit('select', {
    id: g.id!,
    name: g.name!,
    pKey: props.pKey || ''
  })
}
</script>
<template>
  <ContentPageLayout class="group-select" style="--header-height: 40px">
    <template #header>
      <div class="control">
        <div class="search">
          <el-form :inline="true">
            <el-form-item :label="tableDict?.get('name') || 'name'">
              <el-input
                v-model="searchForm.name"
                :placeholder="'请输入' + tableDict?.get('name') || 'name'"
              ></el-input>
            </el-form-item>
            <el-form-item :label="tableDict?.get('status') || 'status'">
              <el-select
                v-model="searchForm.status"
                :placeholder="'请选择' + tableDict?.get('status') || 'status'"
              >
                <el-option label="无" value="" />
                <el-option :label="statusDict?.get('1') || '1'" value="1" />
                <el-option :label="statusDict?.get('0') || '0'" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="getPageData">搜索</el-button>
              <el-button :icon="Refresh" @click="reSearch">重置</el-button>
              <el-button :icon="Refresh" @click="getPageData" circle></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <template #default>
      <el-table
        v-loading="loading"
        table-layout="auto"
        :stripe="true"
        :data="page.rows"
        :flexible="true"
      >
        <el-table-column prop="name" align="center">
          <template #header>
            {{ tableDict?.get('name') || 'name' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center">
          <template #header>
            {{ tableDict?.get('status') || 'status' }}
          </template>
          <template #default="{ row }">
            <el-tag :type="row['status'] === '1' ? 'success' : 'danger'">{{
              statusDict?.get(row['status']) || row['status']
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="center">
          <template #header>
            {{ tableDict?.get('createTime') || 'createTime' }}
          </template>
          <template #default="{ row }">
            <span>{{ dateFormat(row['createTime']) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" align="center">
          <template #header>
            {{ tableDict?.get('updateTime') || 'updateTime' }}
          </template>
          <template #default="{ row }">
            <span>{{ dateFormat(row['updateTime']) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" align="center">
          <template #header>
            {{ tableDict?.get('description') || 'description' }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="400">
          <template #header> 操作 </template>
          <template #default="{ row }">
            <div class="buttons">
              <el-button type="warning" @click="selectGroup(row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <Pagination :page="page" :get-page-data="getPageData" />
    </template>
  </ContentPageLayout>
</template>
